<template>
  <div id="dv">
    <div>
      <div>
        <van-row>
          <van-col span="5" @click="back()"><van-icon name="arrow-left" class="xi" />返回</van-col>
          <van-col span="13"><label class="xi">喜茶</label></van-col>
          <van-col span="6">
            <van-popover v-model:show="showPopover" :actions="actions">
              <template #reference>
                <van-button icon="weapp-nav" id="btn1" ></van-button>
              </template>
            </van-popover>
          </van-col>
        </van-row>

      </div>
      <div class="dv2">
        <van-image
            width="100%"
            height="10rem"
            fit="cover"
            position="left"
            src="https://img0.baidu.com/it/u=1608729173,3638244096&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
        />
      </div>
      <div style="margin-top: 0px; background-color: #FBCFD0">
        <p class="p1">茶在手中,喜在心中</p>
        <p class="p1">喜诗，喜花，喜茶，更喜你</p>
      </div>

      <div id="dv3">
        <div>
          <van-row id="row">
            <van-col span="6"><h3>GO会员</h3></van-col>
            <van-col span="8"><h5>成为会员享双倍积分</h5></van-col>
            <van-col span="10"></van-col>
          </van-row>
          <div id="dv4">
            <van-tag type="warning" >lv2</van-tag>
          </div>
          <van-divider />
          <div >
            <van-row gutter="20">
              <van-col span="8" >
                <van-button round type="primary" size="small" @click="integral()"><van-icon name="points" />积分商城</van-button>

              </van-col>
              <van-col span="8"></van-col>
              <van-col span="8" @click=""><van-button round type="primary" size="small" @click="sh()"><van-icon name="credit-pay" />收货地址</van-button>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>

      <div id="dv5">
        <van-row>
          <van-col span="10">
            <h3>每日签到</h3>
            <h3>购买喜茶</h3>
            <h3>购买vip</h3>
          </van-col>
          <van-col span="8"></van-col>
          <van-col span="6">
            <h3><van-button round type="primary" size="mini" :color="color" :disabled="btn" @click="bt1()" >积分 +5</van-button></h3>
            <h3><van-button round type="primary" size="mini" :color="color" >积分+20</van-button></h3>
            <h3><van-button round type="primary" size="mini" :color="color" :disabled="btn0" >积分+100</van-button></h3>
          </van-col>
        </van-row>
      </div>
      <div>
        <div>
          <van-nav-bar

              left-text="开通礼包"
              right-text="更多"

              @click-left="onClickLeft"
          />
        </div>
        <div>
          <van-grid direction="horizontal" :column-num="3">
            <van-grid-item icon="photo-o" text="星球赠饮券" />
            <van-grid-item icon="photo-o" text="买一赠一券" />
            <van-grid-item icon="photo-o" text="买二赠一券" />
          </van-grid>
          <van-grid direction="horizontal" :column-num="3">
            <van-grid-item icon="photo-o" text="喜茶轻食券" />
            <van-grid-item icon="photo-o" text="优先券" />
            <van-grid-item icon="photo-o" text="免运费券" />
          </van-grid>

        </div>
      </div>
    </div>
      <div class="button">
        <van-button round type="info" size="normal" @click="edit()">编辑个人资料</van-button>
        <van-button round type="info" size="normal" @click="change()">切换账号</van-button>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" round type="info" size="large" @click="loginout()">退出登录</van-button>
      </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
  name: "MyView",
  setup() {
    const showPopover = ref(false);

    // 通过 actions 属性来定义菜单选项
    const actions = [
      { text: '编辑个人资料' },
      { text: '切换账号' },
      { text: '退出' },
    ];
    const onSelect = (action) => Toast(action.text);

    return {
      actions,
      onSelect,
      showPopover,
      color:"",
    };
  },
  data(){
   return{
     signIn:{
       type:1,
       integral:5
     },
     shop:{
       type:2,
       integral:20
     },
     btn:true,
     btn0:false
   }
  },
  mounted() {

      this.select();
  },
  methods:{
    integral(){
      this.$router.push("integral");
    },
    back(){
      history.back();
    },
    sh(){
      this.$router.push("/addressList");
    },
    edit(){
      this.$router.push("/myInform");
    },
    change(){
      this.axios.get("/user/loginOut.do").then((res)=>{
        if(res.data.code==200){
          this.$router.push("/login");
        }
      })
    },
    loginout(){
      this.axios.get("/user/loginOut.do").then((res)=>{
        if(res.data.code==200){
          this.$router.push("/login");

        }

      })
    },
    select(){
      this.axios.get("/task/selectSingIn.do?type="+JSON.stringify(this.signIn.type)+"&integral="+JSON.stringify(this.signIn.integral)).then(res=>{
        if (res.data.code==200){
          this.btn=false;
        }else {
          this.btn = true;
        }
      })
    },
    bt1(){
      this.axios.get("/task/signIn.do?type="+JSON.stringify(this.signIn.type)+"&integral="+JSON.stringify(this.signIn.integral)).then(res=>{
        if(res.data.code==200){
          this.btn=true;
          this.$toast(res.data.data);

        }else {
          this.$toast(res.data.msg);
        }
      })
    },
    bt2(){
      this.axios.get("/task/shop.do?type="+this.shop.type+"&integral="+this.shop.integral).then(res=>{
        if(res.data.code==200){
          this.$toast(res.data.data);
        }else{
          this.$toast(res.data.msg);
        }
      })
    },

  }
}
</script>

<style scoped>
.p1{
  margin: 0px;
}
.dv2{
  margin-bottom: 0px;
}
#dv{
  background-color: #F6F6F6;
  margin-bottom: 100px;
}
#dv3{
  width: 100%;
  height: 180px;
  align-content: center;
  margin-top: 2px;
  background-color: #FBCFD0;
}
#btn1{
  margin-right: 5px;
  background-color: #F6F6F6 ;
  border: none;
}
#dv4{
 margin-right: 75%;
}
#row{
  height: 50px;
}
#dv5{
  background-color: #DAAADB;
  margin-top: 5px;
}
.xi{
  font-size: 25px;
}
.button {
  background-color: #fff;
  padding-top: 10px;
  width: 100%;
  bottom: 0;
  height: 55px;
}
</style>